<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>行驶中的一天</title>

    <link rel='stylesheet' href='css/mapbox.css'  />
    <link href="css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="fb-root"></div>
<!--<script>(function(d, s, id) {-->
  <!--var js, fjs = d.getElementsByTagName(s)[0];-->
  <!--if (d.getElementById(id)) return;-->
  <!--js = d.createElement(s); js.id = id;-->
  <!--js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=174160066065207&version=v2.0";-->
  <!--fjs.parentNode.insertBefore(js, fjs);-->
<!--}(document, 'script', 'facebook-jssdk'));</script>-->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-road"></span>纽约出租车： 行驶中的一天</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="../../index.html" style="color:#777E60">返回主界面</a></li>
                    <!--<li><div class = "about">返回主界面</div></li>-->
                    <!--<li><div class = "asterisks">uadb</div></li>-->
                    <!--<li><div class = "attribution">geomesa</div></li>-->
                    <!--<li>-->
                        <!--<div class="fb-like" data-href="http://nyctaxi.herokuapp.com/" data-layout="button_count" data-action="recommend" data-show-faces="true" data-share="true"></div>-->
                    <!--</li>-->
                    <!--<li class=twitter-button>-->
                        <!--<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://nyctaxi.herokuapp.com" data-text="A Day in the Life of an NYC Taxi: Data Visualization by @chris_whong" data-hashtags="dataviz">Tweet</a>-->
<!--<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>-->
                    <!--</li>-->
                </ul>
            </div><!--/.nav-collapse -->



        </div>
    </div>
    <div id="map">

    </div>
    <div class="container overlay">
        <div class="jumbotron">
            <h1>纽约出租车：行驶中的一天</h1>
            <p>这个可视化显示2013年一天内随机出现的纽约市黄色出租车的数据。查看它在哪里行驶，它赚了多少钱，以及它在24小时内有多忙。</p><br/>
            <p class = 'text-center'><a id = "begin" class="btn btn-primary btn-lg" role="button">开始 <span class="glyphicon glyphicon-play"></span></a></p>
            <br/>
            <!--<p style = 'font-size:16px'>A Special Thanks goes out to <a href = "http://www.mapbox.com">Mapbox</a> and <a href = "http://www.heroku.com">Heroku</a> for assistance with covering the surge of activity when this project was first released in 2014. </p>-->
            <!--<p style = 'font-size:16px'> Here's <a href = "http://chriswhong.com/data-visualization/taxitechblog1/">Technical Blog Post #1</a> and <a href = "http://chriswhong.com/open-data/taxi-techblog-2-leaflet-d3-and-other-frontend-fun/">#2</a> about how this visualization was built. </p>-->
            <!--<div class = "badges">-->
            <!--<a href = "http://www.informationisbeautifulawards.com/news/49-2014-the-winners"><image src = "image/kantariib.png"></a>-->
            <!--<a href = "http://www.andresmh.com/nyctaxitrips/"><image src = "image/getDataButton.png"></a>-->
            </div>
        </div>
    </div>
    <div class = 'container popup aboutPopup'>
        <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">介绍</h3><span class="glyphicon glyphicon-remove"></span>
      </div>
      <div class="panel-body">
      <strong>纽约出租车：行驶中的一天</strong>

        <p style="margin-top: 10px">1. 时空数据是从nyctaxi2013数据集中取出的，显示了一个单一的出租车在一天的活动。原始数据包括1亿7000万次行程，从其中随机抽取30个出租车的一天</p>
        <p>
            2. 目的是分析一天内出租车票价、税款等收入，并查看出租车如何在纽约周围移动的轨迹。
        </p>
        <p>
            3. 原始数据只包括每次行程的起始位置和结束位置。这些点是通过谷歌的方向API运行的，以创建在这个可视化中显示的路线。
        </p>
      </div>
    </div>
    </div>
    <div class = 'container popup asterisksPopup'>
        <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">uadb</h3><span class="glyphicon glyphicon-remove"></span>
      </div>
      <div class="panel-body">
        <!--<h4>Here are some gotchas:</h4>-->
        <!--<ul>-->
            <!--<li><strong>Trip Routes</strong> are a result of passing the start and end locations to the <a href = "https://developers.google.com/maps/documentation/directions/">Google Directions API</a>.  They are a possible route that the taxi took, but should not be assumed to be accurate.</li>-->
            <!--<li><strong>Empty Taxis</strong> also follow the "best route" between a dropoff and the next pickup.  Just as with the trips, this is just an effective way to move the marker around, but doesn't reflect the reality of where the taxi traveled. </li>-->
            <!--<li><strong>Tips</strong> are only reported in the data for credit card transactions.  Cash tips are not included. </li>-->
        <!--</ul>-->
      </div>
    </div>
    </div>
    <div class = 'container popup attributionPopup'>
        <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">geomesa</h3><span class="glyphicon glyphicon-remove"></span>
      </div>
      <div class="panel-body">

        <ul>
            <!--<li><a href = "http://bost.ocks.org/mike/leaflet/">Mike Bostock's D3 + Leaflet</a> - The foundation for throwing geoJSON onto Leaflet with external tiles.-->
            <!--</li>-->
            <!--<li><a href = "http://bl.ocks.org/KoGor/8163022">KoGor's Marker Animation Along SVG Path</a> - This technique made the animated cab marker work!-->
            <!--</li>-->
            <!--<li>-->
            <!--<a href = "http://www.mapbox.com">Mapbox</a> for super-simple subdued basemap tiles, and for releasing a totally sweet node package for converting Google Encoded Polylines into raw Coordinates.-->
            <!--</li>-->
            <!--<li>-->
            <!--Thanks to <a href = "http://www.reddit.com/r/bigquery/comments/28ialf/173_million_2013_nyc_taxi_rides_shared_on_bigquery/">u/fhoffa on Reddit</a> for importing the data into BigQuery helping me with the custom query I needed to pull full days of data for random taxis.-->
            <!--</li>-->
        </ul>
      </div>
    </div>
    </div>
    <div class="dateTimeBox box">
        <div class = "date"></div> 
        <div class = "time"><span class="glyphicon glyphicon-time"></span> <span class = "readableTime"></span></div> 
        <div class= "controls">
            <button type="button" class="btn btn-default btn-xs slower"><span class="glyphicon glyphicon-backward"></span> 快退</button>
            <button type="button" class="btn btn-default btn-xs faster">快进 <span class="glyphicon glyphicon-forward"></span> </button>
        </div>
        <div>时间间隔: <span class = "timeFactor"></span> 分钟每秒</div>
    </div>
    <div class="legendBox box">
        <div class = "boxHeader"><span class="glyphicon glyphicon-map-marker"></span> 图例</div>
        <div class = 'legendItem'>
        <svg>
            <circle r="5" id="marker" transform="translate(20,20)"></circle>
        </svg><p>载客状态</p></div>
        <div class = 'legendItem'>
        <svg>
            <circle r="20" id="marker" transform="translate(20,20)" style="opacity:0.30000000000000004"></circle>
        </svg><p>无客状态<sup>*</sup></p></div>
        <div class = 'legendItem'>
        <svg>
            <circle r="5" class="startPoint" transform="translate(20,20)"></circle>
        </svg><p>乘客上车点</p></div>
        <div class = 'legendItem'>
        <svg>
            <circle r="5" class="endPoint" transform="translate(20,20)"></circle>
        </svg><p>乘客下车点</p></div>
        <div class = 'legendItem'>
        <svg>
            <path class="trip true" style="opacity:.7" d="M10,10L30,30" ></path>
        </svg><p>出租车路线<sup>*</sup></p></div>
    </div>

    <div class="newBox box">
     <button type="button" class="btn btn-default btn-lg reload">
      <span class="glyphicon glyphicon-refresh"></span> 载入另一辆出租车!
    </button>
    </div>
    <!--$: <span class = "runningFare">Test</span>-->

    <div class="totalsBox box">
        <div class = "boxHeader"><span class="glyphicon glyphicon-dashboard"></span>出租车费用</div>

        <p>票价: <span class = "runningFare running"></span></p>
        <p>附加费: <span class = "runningSurcharge running"></span></p>
        <p>政府税: <span class = "runningTax running"></span></p>
        <p>小费<sup>*</sup>: <span class = "runningTip running"></span></p>
        <p class = "tolls">过路费: <span class = "runningTolls running"></span></p>
        <p>总收费: <span class = "runningTotal running"></span></p>
        <p>乘客: <span class = "runningPassengers running"></span></p>
        <div class = "passengerGlyphs"></div>
    </div>  


    <div class="areaChartBox box">
    </div>



    <script src="js/moment.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/d3.v3.min.js"></script>
    <script src='js/mapbox.js'></script>
    <script src="js/script.js"></script>

    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','js/analytics.js','ga');

  ga('create', 'UA-4921346-5', 'auto');
  ga('send', 'pageview');

</script>
</body>
</html>



